<template>
	<view class="left-window-style">
		<view class="second-menu">
			<!-- <keep-alive> -->
			
			<component v-bind:is="active" :hasLeftWin="hasLeftWin" :leftWinActive="leftWinActive"></component>
			<!-- </keep-alive> -->
		</view>
	</view>
</template>

<script>
	import menu from '@/pages/menu/menu.vue'
	//import mine from '@/pages/tabBar/mine/mine.vue'
	
	import {
			mapMutations,
			mapState
	} from 'vuex'
	let isPcObserver, isPhoneObserver
	export default {
		data() {
			return {
				active: menu,
				isPC: false,
				menuList:[]
			}
		},
		components: {
			menu,
		},
		computed: {
			...mapState({
				active: state => state.active,
				hasLeftWin: state => !state.noMatchLeftWindow,
				leftWinActive: state => state.leftWinActive.split('/')[3],
			})
		},
		mounted() {
			isPcObserver = uni.createMediaQueryObserver(this)
			isPhoneObserver = uni.createMediaQueryObserver(this)
		
			isPcObserver.observe({
				minWidth: 768
			}, matched => {
				this.isPC = matched
				const pageUrl = this.$route.path
				if (!pageUrl) return
				const pageName = this.$route.path.split('/')[4]
				
				uni.reLaunch({
					url: '/pages/home/home'
				})				
				
			})
		
			isPhoneObserver.observe({
				maxWidth: 767
			}, matched => {
				this.isPC = !matched
				if (matched) {
					const pageUrl = this.$route.path
					const tabbarName = this.$route.path.split('/')[2]
					
				}
			})
		},
		unmounted() {
			isPcObserver.disconnect()
			isPhoneObserver.disconnect()
		},
		watch: {
			isPC: {
				immediate: true,
				handler(newMatches) {
					this.setMatchLeftWindow(newMatches)
					// this.handlerRoute(this.$route)
				}
			},
			// #ifndef VUE3
			$route: {
				immediate: true,
				handler(newRoute) {
					this.handlerRoute(newRoute)
				}
			},
			// #endif
			// #ifdef VUE3
			$route(newRoute) {
				this.handlerRoute(newRoute)
			}
			// #endif
		},
		methods: {
			...mapMutations(['setMatchLeftWindow', 'setActive', 'setLeftWinActive']),
			handlerRoute(newRoute) {
				if (this.isPC) {
					console.log(newRoute)
					// if (newRoute.path === '/') {
					// 	// uni.redirectTo({
					// 	// 	url: '/pages/component/view/view'
					// 	// })
					// } else if (!newRoute.matched.length) {
					// 	uni.redirectTo({
					// 		url: '/pages/error/404'
					// 	})
					// } else {
					// 	this.setLeftWinActive(newRoute.path)
					// 	let active = newRoute.path.split('/')[2]
					// 	if (this.nav.includes(active)) {
					// 		if (active === 'menu') {
					// 			active = 'menu'
					// 		}
					// 		this.setActive(active)
					// 	}
					// }
				}
			},
			switchTab() {
			
			}
		}
	}
	
	
</script>

<style>
	@import '../common/uni-nvue.css';
	
	.left-window-style {
		min-height: calc(100vh - var(--top-window-height));
		background-color: #f8f8f8;
	}
	
	.second-menu {
		width: 350px;
		background-color: #F8F8F8;
	}
	
	.icon-image {
		width: 30px;
		height: 30px;
	}
</style>